<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spirit</title>
    <!-- 引入bootstrap文件 -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
    <!-- 初始化样式 -->
    <link rel="stylesheet" href="./assets/css/reset.css">
    <link rel="stylesheet/less" href="./assets/css/index.less">
    <!-- 引入动画库 -->
    <link rel="stylesheet" href="./assets/css/animate.min.css">
</head>

<body>
    <!-- 顶部导航 -->
    <nav class="navbar navbar-inverse">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand logo wow bounceInLeft" href="javascript:void(0)" data-lang="logo">SPIRIT</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav navbar-right">
                    <li><a class="wow bounceInDown" data-wow-delay="0ms" href="#home" data-lang="nav1">HOME</a></li>
                    <li><a class="wow bounceInDown" data-wow-delay="100ms" href="#about" data-lang="nav2">About</a></li>
                    <li><a class="wow bounceInDown" data-wow-delay="200ms" href="#services" data-lang="nav3">SERVICES</a></li>
                    <li><a class="wow bounceInDown" data-wow-delay="300ms" href="#services" data-lang="nav4">portfolio</a></li>
                    <li><a class="wow bounceInDown" data-wow-delay="400ms" href="#portfolio" data-lang="nav5">testimonials</a></li>
                    <li><a class="wow bounceInDown" data-wow-delay="500ms" href="#contact" data-lang="nav5">CONTACT</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                          <li><a href="javascript:void(0)" data-langs="zh">中文</a></li>
                          <li><a href="javascript:void(0)" data-langs="en">English</a></li>
                        </ul>
                      </li>

                </ul>
            </div>
        </div>
    </nav>
    <!-- 主题背景 -->
    <div class="top-bg">
        
        <div class="box">
            <div class="title">
                <p class="wow rubberBand" data-wow-delay="100ms" data-lang="banner-title">wELCOME on <span>spirit8</span></p>
                <p class="wow flipInY" data-wow-delay="200ms" data-lang="banner-desc">We are a digital agency with <span>years of experience</span>
                    and with <span>extraordinary people</span></p>
            </div>
            <div class="icon wow fadeInUpBig" data-wow-delay="500ms"><a href="#contact">↓</a></div>
        </div>
        <div class="mp4"><video src="./assets/images/banner.mp4" autoplay muted loop></video></div>
        
        
    </div>
    <!-- box1 -->
    <div class="box1" id="home">
        <div class="left wow fadeInUp"><img src="./assets/images/spirit-01_03.png" alt=""></div>
        <div class="right ">
            <p class="title1 wow fadeInUp" data-wow-delay="100ms">About us</p>
            <h3 class="title2 wow fadeInUp" data-wow-delay="200ms"><span>Some</span> words <span>about us</span></h3>
            <p class="text wow fadeInUp" data-wow-delay="300ms">We love building and rebuilding brands through our specific skills.
                Using colour, fonts, and illustration, we brand companies in a way they will never forget.</p>
            <ul class="list wow fadeInUp" data-wow-delay="400ms">
                <li><span class="glyphicon glyphicon-record"></span><span>Mission -</span> We deliver uniqueness and
                    quality</li>
                <li><span class="glyphicon glyphicon-record"></span><span>Skills -</span> Delivering fast and excellent
                    results</li>
                <li><span class="glyphicon glyphicon-record"></span><span>Clients -</span> Satisfied clients thanks to
                    our experience</li>
            </ul>
            <div class="click wow fadeInUp" data-wow-delay="500ms"><span class="glyphicon glyphicon-briefcase"></span> Browse our work</div>
            <div class="icon2" id="up"><a href="#"><img src="./assets/images/top.svg" alt=""></a></div>
        </div>
    </div>
    <div class="box2 box-list" id="about">
        <div class="title wow fadeInUp" data-wow-delay="100ms">
            <p>Meet <span>our team</span></p>
            <span></span>
            <span></span>
        </div>
        <div class="content">
            <div class="box wow fadeInUp" data-wow-delay="200ms">
                <div></div>
                <div class="text">
                    <p>Jason Statham</p>
                    <p>Knife designer</p>
                    <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                </div>

            </div>
            <div class="box wow fadeInUp" data-wow-delay="300ms">
                <div></div>
                <div class="text">
                    <p>Van Damme</p>
                    <p> No English</p>
                    <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                </div>

            </div>
            <div class="box wow fadeInUp" data-wow-delay="400ms">
                <div></div>
                <div class="text">
                    <p>Sylvester Stallone</p>
                    <p>Cigar Lover</p>
                    <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                </div>

            </div>
            <div class="box wow fadeInUp" data-wow-delay="500ms">
                <div></div>
                <div class="text">
                    <p>Jet Li</p>
                    <p>I need more money</p>
                    <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                </div>

            </div>
        </div>
        <div class="indicator">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <div class="box3 box-list" id="services">
        <div class="title wow fadeInUp" data-wow-delay="100ms">
            <p>take a look at <span>our services</span></p>
            <span></span>
            <span></span>
            <p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
                Good and Evil) by Cicero, written in 45 BC.
                This book is a treatise on the theory of ethics, very popular during the Renaissance.
                The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        </div>
        <div class="content">
            <div class="box wow fadeInUp" data-wow-delay="200ms">
                <div></div>
                <div class="text">
                    <p>Web design </p>
                    <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                        1.10.32.
                    </p>
                </div>

            </div>
            <div class="box wow fadeInUp" data-wow-delay="300ms">
                <div></div>
                <div class="text">
                    <p>Mobile apps</p>
                    <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                        1.10.32.
                    </p>
                </div>

            </div>
            <div class="box wow fadeInUp" data-wow-delay="400ms">
                <div></div>
                <div class="text">
                    <p>PHOTOGRAPHY</p>
                    <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                        1.10.32.
                    </p>
                </div>

            </div>
            <div class="box wow fadeInUp" data-wow-delay="500ms">
                <div></div>
                <div class="text">
                    <p>marketing</p>
                    <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                        1.10.32.
                    </p>
                </div>

            </div>
        </div>
    </div>
    <div class="box4 box-list" id="portfolio">
        <div class="title wow fadeInUp" data-wow-delay="100ms">
            <p>Meet <span>our team</span></p>
            <span></span>
            <span></span>
        </div>
        <div class="img wow fadeInUp" data-wow-delay="200ms"><img src="./assets/images/ziti_03.png" alt=""></div>
        <div class="indicator wow fadeInUp" data-wow-delay="300ms">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <div class="box5 box-list" id="testimonials">
        <div class="title wow fadeInUp" data-wow-delay="100ms">
            <p>take a look at <span>our work</span></p>
            <span></span>
            <span></span>
            <p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
                Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
                popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
                from a line in section 1.10.32.</p>
        </div>
        <div class="content">
            <div class="text">
                <p>Filter by type</p>
                <!-- Single button -->
                <div class="btn-group wow fadeInUp" data-wow-delay="200ms">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                        请选择 <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#">All</a></li>
                        <li><a href="#">Web design</a></li>
                        <li><a href="#">Mobile design</a></li>
                        <li><a href="#">Photograpy</a></li>
                    </ul>
                </div>
                <ul class="wow fadeInUp" data-wow-delay="300ms">
                    <li><a href="">All</a></li>
                    <li><a href="">Web design</a></li>
                    <li><a href="">Mobile design</a></li>
                    <li><a href="">Photograpy</a></li>
                </ul>
            </div>
            <div class="box">
                <div class="item wow fadeInUp" data-wow-delay="100ms">
                    <div class="add">
                        <div class="text">
                            <p>Trend and fashion</p>
                            <p>Website design</p>
                        </div>
                        <div class="addchild">
                            <div>
                                <span></span>
                                <span></span>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="200ms">
                    <div class="add">
                        <div class="text">
                            <p>Trend and fashion</p>
                            <p>Website design</p>
                        </div>
                        <div class="addchild">
                            <div>
                                <span></span>
                                <span></span>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="300ms">
                    <div class="add">
                        <div class="text">
                            <p>Trend and fashion</p>
                            <p>Website design</p>
                        </div>
                        <div class="addchild">
                            <div>
                                <span></span>
                                <span></span>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="400ms">
                    <div class="add">
                        <div class="text">
                            <p>Trend and fashion</p>
                            <p>Website design</p>
                        </div>
                        <div class="addchild">
                            <div>
                                <span></span>
                                <span></span>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="500ms">
                    <div class="add">
                        <div class="text">
                            <p>Trend and fashion</p>
                            <p>Website design</p>
                        </div>
                        <div class="addchild">
                            <div>
                                <span></span>
                                <span></span>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="600ms">
                    <div class="add">
                        <div class="text">
                            <p>Trend and fashion</p>
                            <p>Website design</p>
                        </div>
                        <div class="addchild">
                            <div>
                                <span></span>
                                <span></span>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="700ms">
                    <div class="add">
                        <div class="text">
                            <p>Trend and fashion</p>
                            <p>Website design</p>
                        </div>
                        <div class="addchild">
                            <div>
                                <span></span>
                                <span></span>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="800ms">
                    <div class="add">
                        <div class="text">
                            <p>Trend and fashion</p>
                            <p>Website design</p>
                        </div>
                        <div class="addchild">
                            <div>
                                <span></span>
                                <span></span>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="900ms">
                    <div class="add">
                        <div class="text">
                            <p>Trend and fashion</p>
                            <p>Website design</p>
                        </div>
                        <div class="addchild">
                            <div>
                                <span></span>
                                <span></span>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="1000ms">
                    <div class="add">
                        <div class="text">
                            <p>Trend and fashion</p>
                            <p>Website design</p>
                        </div>
                        <div class="addchild">
                            <div>
                                <span></span>
                                <span></span>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="1100ms">
                    <div class="add">
                        <div class="text">
                            <p>Trend and fashion</p>
                            <p>Website design</p>
                        </div>
                        <div class="addchild">
                            <div>
                                <span></span>
                                <span></span>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="1200ms">
                    <div class="add">
                        <div class="text">
                            <p>Trend and fashion</p>
                            <p>Website design</p>
                        </div>
                        <div class="addchild">
                            <div>
                                <span></span>
                                <span></span>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="box6" id="contact">
        <div class="title wow fadeInUp" data-wow-delay="100ms">
            <p>Meet <span>our team</span></p>
            <span></span>
            <span></span>
        </div>

        <div class="text wow fadeInUp" data-wow-delay="200ms">This book is a treatise on the theory of ethics, very popular during the Renaissance. The
            first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
        <p><span>Dean Martin,</span> CEO Acme Inc.</p>
        <div class="indicator wow fadeInUp" data-wow-delay="300ms">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <div class="box7" id="login">
        <div class="title wow fadeInUp" data-wow-delay="100ms">
            <p>feel free to <span>contact us</span></p>
            <span></span>
            <span></span>
            <p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
                Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
                popular during the Renaissance. </p>
        </div>
        <div class="content">
            <div class="top">
                <div class=" wow fadeInUp" data-wow-delay="200ms">
                    <p>Name<sup>*</sup></p>
                    <input type="text" placeholder="请输入用户名">
                </div>
                <div class=" wow fadeInUp" data-wow-delay="300ms">
                    <p>Email address<sup>*</sup></p>
                    <input type="text" placeholder="请输入邮箱">
                </div>
            </div>
            <div class="bottom wow fadeInUp" data-wow-delay="400ms">
                <p>Message<sup>*</sup></p>
                <textarea name="" id="" cols="30" rows="10" placeholder="请输入内容"></textarea>
            </div>
            <div class="submit wow fadeInUp" data-wow-delay="500ms">SEND</div>
        </div>
    </div>
    <div class="footer">
        <div class="left">ALL RIGHTS RESERVED. COPYRIGHT © 2014 <span>SPIRIT8</span></div>
        <div class="right">
            <img src="./assets/images/01_03.png" alt="">
            <img src="./assets/images/02_03.png" alt="">
            <img src="./assets/images/03_03.png" alt="">
            <img src="./assets/images/04_03.png" alt="">
            <img src="./assets/images/05_03.png" alt="">
        </div>
    </div>






    <!-- jQuery -->
    <script src="./assets/js/jquery.min.js"></script>
    <!-- bootstrap.js -->
    <script src="./assets/js/bootstrap.min.js"></script>
    <!-- 引入less -->
    <script src="./assets/js/less.min.js"></script>
    <!-- 引入懒加载 -->
    <script src="./assets/js/wow.min.js"></script>
    <!-- 初始化懒加载 -->
    <script>
        new WOW().init()

        document.onscroll = function (){
            var scroll = document.documentElement.scrollTop
            scroll>=1000 ? $("#up").fadeIn("slow") : $("#up").fadeOut("slow")
        }
        //渲染时获取语言
        var lang = localStorage.getItem("lang") ? localStorage.getItem("lang") : "en"
        changeLang(lang)
        // 获取语言切换标签
        $(".dropdown-menu a").click(function(){
            var lang = $(this).data('langs')
            lang = lang ? lang : "en"
            localStorage.setItem('lang',lang)
            // console.log(`${lang}.json`)
            // 发送异步请求
            changeLang(lang);
            
        })
        function changeLang(lang) {
            $.ajax({
                type:"get",
                url:`./assets/lang/${lang}.json`,
                dataType:"json",
                success:function(results){
                    // 获取所有带有data-lagn属性的元素
                    var langlist = $("*[data-lang]")
                    // 循环
                    langlist.each(function(item){
                        var lang = $(this).data("lang")
                        $(this).html(results[lang])
                    })
                }
            })
        }
    </script>
</body>

</html>